<template>
  <label 
    class="mx-tagging-text"
    :class="{'is-hover': context.isHover}"
    :style="currentStyle">
    {{ currentTaggingText }}
  </label>
</template>

<script>
import _ from "lodash";

export default {
  props: {
    context: {},
    tagging: {}
  },
  computed: {
    currentTaggingText() {
      let text = this.tagging.text;
      if (typeof text === "string") {
        return _.get(this.context.prop, text);
      } else {
        return text.call(this.context, this.context.prop);
      }
    },
    currentNormalStyle() {
      let style = this.tagging.normalStyle
      let state = this.context.currentState
      if (!style || typeof style === "string" || state === null || state === undefined) return style
      style = style[state]
      return typeof style === "function" ? style.call(this, this.prop) : style;
    },
    currentHoverStyle() {
      let style = this.tagging.hoverStyle
      let state = this.context.currentState
      if (!style || typeof style === "string" || state === null || state === undefined) return style
      style = style[state]
      return typeof style === "function" ? style.call(this, this.prop) : style;
    },
    currentStyle() {
      return this.context.isHover ? this.currentHoverStyle : this.currentNormalStyle;
    }
  }
};
</script>

<style lang="stylus">
.mx-tagging-text {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1px;
  white-space: nowrap;
  color: white;
  font-size: 14px;
  line-height: 20px;
  font-family: '微软雅黑';
  text-shadow: none;
  pointer-events: none;
  user-select: none;
  transform: translate3d(-50%, -50%, 0);

  &.is-hover {
    color: red;
    font-size: 16px;
  }
}
</style>
